@audit-item-height: 25px;

.record-item {
    display: flex;
    flex-direction: column;

    .item {
        display: flex;
        align-items: center;
        height: @audit-item-height;
        font-size: 14px;
        color: #909090;

        .item-name {
            flex-shrink: 0;
        }

        .item-data {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .info-wrapper {
        flex-shrink: 0;
        height: @audit-item-height * 2;
    }

    .dot {
        flex-shrink: 0;
        height: @audit-item-height;
        position: relative;

        &::after {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #FFCD42;
            display: inline-block;
            box-shadow: 0 0 0 3px #fff, 0 0 0 4px #FFCD42;
            position: relative;
            left: 4px;
        }
    }

    .dot-wait {
        &::after {
            background-color: #FFCD42;
            box-shadow: 0 0 0 3px #fff, 0 0 0 4px #FFCD42;
        }
    }

    .dot-pass {
        &::after {
            background-color: #1890ff;
            box-shadow: 0 0 0 3px #fff, 0 0 0 4px #1890ff;
        }
    }

    .dot-return {
        &::after {
            background-color: #FB5138;
            box-shadow: 0 0 0 3px #fff, 0 0 0 4px #FB5138;
        }
    }

    .result-wrapper {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: @audit-item-height * 3;
    }
}